<!-- 公共内容区 -->
<template>
	<uni-list>
		<uni-list-item :showArrow="false"
			:class="styletype=='one'?'listwrap one':styletype=='two'?'listwrap two' :'listwrap'"
			v-for="(item,index) in listdata" v-if="index <= (like?like:listdata.length)" :key="item.id"
			@click="todetail(item.id,classoract)">
			<view class="list">
				<!-- <view v-if="!jlbHide" class="jlb">
					<view class="jlbicon"></view>
					<text>{{item.clubName}}</text>
				</view> -->
				<view class="listcon">
					<!-- 课程 -->
					<view class="imgwrap" v-if="classoract =='class'">
						<image v-if="classoract=='class' && item.coachIcon" class="class_img" :src="item.coachIcon"
							mode="aspectFill" />
						<image v-else class="class_img" :src="'@/static/images/image-default.png'|addBaseImgUrl" />
					</view>
					<!-- 活动 -->
					<view class="imgwrap" v-if="classoract !=='class'">
						<image v-if="item.actImgUrl" class="act_img" :src="item.actImgUrl" mode="aspectFill" />
						<image v-else class="act_img" :src="'@/static/images/image-default.png'|addBaseImgUrl" />
						<!-- <view class="small pos" v-if="classoract!=='class'">
							<view v-if="item.type=='2'">赛事</view>
						</view> -->
					</view>
					<!-- 活动 -->
					<view :class="styletype=='one' || styletype=='two'?'ccc':'ccc bor'" v-if="classoract !=='class'">
						<view class="con">
							<!-- 标题 -->
							<view class="tr tit-bottom ">
								<text class="line-clamp-1tit tit line-clamp-1">{{item.title}}</text>
								<view class="r">
									<view v-if="item.payStartCountDown!=='0'" class="rtop start">即将开始</view>
									<!-- <view v-else-if="item.state=='2'" class="end">报名结束</view> -->
									<view v-else class="rtop"><text class="ss">{{item.registrationCount}}</text><text
											class="cc">/{{item.maxNumber}}人</text></view>
								</view>
							</view>
							<!-- 场馆距离 -->
							<view class="cgwrap">
								<text class="cgtit cgtitbor line-clamp-1">{{item.placeName}}</text>
								<text class="cgtit24">{{item.distanceStr}}</text>
							</view>
							<!-- 俱乐部名称 -->
							<view class="cgwrap">
								<text class="cgtit cgtitbor line-clamp-1">{{item.clubName}}</text>
								<!-- <text class="rtop cgtit24">{{item.distanceStr}}</text> -->
							</view>
							<view class="tr tit-bottom">
								<view class="huismall">{{item.startDate | datetit}} {{item.startDate | getWeek}}
									{{item.startTime.slice(0,5)+'-'+item.endTime.slice(0,5)}}</view>
							</view>
							<view class="tr jibie">
								<view class="small">
									<view class="man">{{'男L'+item.levelStart+'-L'+item.levelEnd}}</view>
									<view class="woman">{{'女L'+item.girlLevelStart+'-L'+item.girlLevelEnd}}</view>
								</view>
								<view class="jiage">
									<view v-if="item.state=='2'" class="end">报名结束</view>
									<view v-else>
										<text class="ys">¥</text><text class="yb">{{item | showCost}}<text
												class="font24 col-orange">{{(item.isBoyGirl=='1'|| item.isVip=='1')?'起':'' }}</text></text>
									</view>

								</view>
							</view>
						</view>
					</view>
					<!-- 课程 -->
					<view v-else :class="styletype=='one' || styletype=='two'?'ccc classCCC':'ccc classCCC bor'">
						<view class="con">
							<!-- 标题 -->
							<view class="tr tit-bottom">
								<text class="line-clamp-1 tit line-clamp-1">{{item.title}}</text>
								<!-- <view class="r"> -->
								<!-- <text class="rtop cgtit24">{{item.distanceStr}}</text> -->
								<!-- <view v-if="item.payStartCountDown!=='0'" class="rtop start">即将开始</view> -->
								<!-- <view v-else class="rtop"><text class="ss">{{item.enterNum}}</text><text class="cc">人报名</text></view> -->
								<!-- </view> -->
							</view>
							<!-- 场馆距离 -->
							<view class="cgwrap">
								<text class="cgtit cgtitbor line-clamp-1">{{item.placeName}}</text>
								<text class="rtop cgtit24">{{item.distanceStr}}</text>
							</view>
							<!-- 俱乐部名称 -->
							<view class="cgwrap">
								<text class="cgtit cgtitbor line-clamp-1">{{item.clubName}}</text>
								<!-- <text class="rtop cgtit24">{{item.distanceStr}}</text> -->
							</view>
							<view class="tr flexbot">
								<view class="smallbg">
									<view v-if="item.type=='0'">私教课</view>
									<view v-if="item.type=='1'">团体课</view>
									<view v-if="item.type=='2'">集训班</view>

									<view v-if="item.medal=='1'">金牌教练</view>
								</view>
								<view class="jiage">
									<view v-if="item.state=='2'" class="end">报名结束</view>
									<view v-else> <text class="ys">¥</text><text class="yb">{{item | showCost}}<text
												class="font24 col-orange">{{(item.configCount&&item.configCount >1)?'起':'' }}</text></text>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-list-item>
	</uni-list>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import vanButton from "@/wxcomponents/vant/dist/button/index"
	import vanIcon from "@/wxcomponents/vant/dist/icon/index"
	import {
		rili
	} from '@/common/js/util.js'
	export default {
		name: 'commCon',
		props: [
			'listdata',
			'status',
			'styletype',
			'classoract',
			'like',
			'jlbHide'
		],
		components: {
			vanButton,
			vanIcon
		},
		data() {
			return {

			};
		},
		computed: {
			...mapState(['accessToken', 'clubInfo']),
		},
		onLoad() {},
		beforeCreate() {

		},
		methods: {
			todetail(id, text) { //去详情
				this.$emit('todetail', id, text, '22')
			}
		},
		filters: {
			datetit(a) {
				let date = a.split("-");
				return `${date[1]}月${date[2]}日`
			},
			showCost(a) {
				let arr = [a.cost, a.costGirl, a.costBoyVip, a.costGirlVip];
				arr.sort(function(a, b) {
					return a - b;
				})

				return Number(arr[0]);
			},
			setstatus(a) {
				//0:未开始，1：进行中，2：已结束
				let text = '';
				switch (a) {
					case 0:
						text = '未开始';
						break;
					case 1:
						text = '进行中';
						break;
					case 2:
						text = '已结束';
						break;
				}
				return text;
			},
			settype(a) { //课程类型（1长期2短期）
				let text = '';
				switch (a) {
					case '0':
						text = '私教课';
						break;
					case '1':
						text = '团体课';
						break;
					case '2':
						text = '集训班';
						break;
				}
				return text;
			},
			getWeek(a) {
				let aa = rili.getweekDay(a);
				let text = '';
				switch (aa) {
					case 1:
						text = '周一';
						break;
					case 2:
						text = '周二';
						break;
					case 3:
						text = '周三';
						break;
					case 4:
						text = '周四';
						break;
					case 5:
						text = '周五';
						break;
					case 6:
						text = '周六';
						break;
					case 0:
						text = '周日';
						break;
				}
				return text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listwrap {
		width: 100%;
		background-color: #fff;

		.list {
			// padding-left:20rpx;
			padding-top: 20rpx;

			.jlb {
				display: flex;

				.jlbicon {
					width: 32rpx;
					height: 32rpx;
					background: url('@/static/images/icon-vipcard-club.png') no-repeat;
					background-size: 100% 100%;
					margin-right: 12rpx;
				}

				text {
					font-size: 26rpx;
					color: #999;
					line-height: 32rpx;
				}
			}

			.listcon {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
			}

			.imgwrap {
				// padding:30rpx 0;
				margin-right: 19rpx;
				position: relative;

				.pos {
					position: absolute;
					left: 0;
					top: 0;
				}
			}

			.class_img {
				width: 122rpx;
				height: 122rpx;
				border-radius: 122rpx;

			}

			.act_img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 15rpx 15rpx;
				overflow: hidden;
				// padding:30rpx 0 ;
			}

			.ccc {
				width: 540rpx;
				display: flex;
				justify-content: space-between;
			}

			.classCCC {
				width: 570rpx;
			}

			.bor {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #e9e9e9;
			}

			.con {
				// width:312rpx;
				display: flex;
				flex-wrap: wrap;
				// height:190rpx;
				width: 100%;

				.tr {
					width: 100%;
					display: flex;
					justify-content: space-between;
					height: 32rpx;
				}

				.tit-bottom {
					margin-bottom: 16rpx;
				}

				.tit {
					// font-size: 30rpx;
					// color: #333;
					// line-height: 30rpx;
					// height: 30rpx;
					// overflow: hidden;
					// align-self: flex-start;
          // width: 370rpx;
          font-size: 30rpx;
					color: #333;
          align-self: flex-start;
          max-width: 370rpx;
          vertical-align: middle;
          line-height: normal;
				}

				.cgwrap {
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 30rpx;
					margin-bottom: 16rpx;
					overflow: hidden;
				}

				.cgtit {
					font-size: 24rpx;
					color: #999;
					line-height: 30rpx;
					// margin-bottom: 10rpx;
					align-self: flex-start;
					border-right: 1rpx solid #ccc;
					padding-right: 30rpx;
					margin-right: 20rpx;
					max-width: 300rpx;
				}

				.cgtitbor {
					border: none;
				}

				.cgtit24 {
					font-size: 24rpx;
					color: #999;
					line-height: 30rpx;
					align-self: flex-start;
					width: 100rpx;
					text-align: right;
				}
			}

			.huismall {
				// padding:0 10rpx;
				color: #999;
				height: 34rpx;
				border-radius: 5rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				// border:1px solid #e1e1e1;
			}

			.small {
				display: flex;
				width: 100%;

				// align-self:flex-end;
				>view {
					padding: 0 10rpx;
					background-color: $bg-color-cheng;
					color: $text-color-cheng;
					height: 32rpx;
					border-radius: 5rpx;
					line-height: 29.5rpx;
					margin-right: 10rpx;
					font-size: 24rpx;
				}

				.man {
					background-color: transparent !important;
					border: 1rpx solid #C8DBFF;
					color: #2E87FF !important;
					line-height: 29rpx;
				}

				.woman {
					background-color: transparent !important;
					border: 1rpx solid #FFC8C3;
					color: #E14806;
					line-height: 29rpx;
				}
			}

			.smallbg {
				display: flex;
				width: 100%;

				// align-self:flex-end;
				>view {
					padding: 0 10rpx;
					background-color: $bg-color-cheng;
					color: $text-color-cheng;
					height: 32rpx;
					border-radius: 5rpx;
					line-height: 32rpx;
					margin-right: 10rpx;
					font-size: 24rpx;
				}
			}

			.ss {
				color: $public-color-yellow1;
				font-size: 24rpx;
				line-height: 25rpx;
			}

			.cc {
				font-size: 24rpx;
				color: #ccc;
			}

			.bigs {
				font-size: 36rpx;
				color: $public-color-yellow1;
				line-height: 32rpx;
			}

			.r {
				width: 150rpx;
				display: flex;
				flex-wrap: wrap;
				// padding-right:20rpx;
				// flex-direction: column;
				// line-height: 25rpx;
				align-content: space-between;

				.rtop {
					align-self: flex-start;
					text-align: right;
					width: 100%;
					line-height: 30rpx;
					white-space: nowrap
				}

				.start {
					// width:151rpx;
					// height:47rpx;
					// background:url($public-baseImgUrl+'classstart.png') no-repeat;
					// background-size: 100% 100%;
					// color:#fff;
					// align-self: flex-start;
					// text-align: center;
					// font-size: 24rpx;
					// line-height:47rpx;
					width: 100%;
					font-size: 24rpx;
					color: #FDB42E;
					text-align: right;
					align-self: flex-start;
					white-space: nowrap
				}

				.end {
					// width:151rpx;
					// height:47rpx;
					// background:url('@/static/images/classend.png') no-repeat;
					// background-size: 100% 100%;
					// color:#fff;
					// align-self: flex-start;
					// text-align: center;
					// font-size: 24rpx;
					// line-height:47rpx;
					// font-size:30rpx;
					// color:#FDB42E;
				}

			}

			.rbot {
				align-self: flex-end;
				text-align: right;
				width: 100%;
				line-height: 32rpx;
				padding-right: 30rpx;
			}

			.flexbot {
				align-self: flex-end;
				align-items: center;

			}

		}

		.jibie {
			height: 32rpx;
			line-height: 32rpx;
		}

		.jiage {
			align-self: flex-end;
			line-height: 32rpx;

			.ys {
				font-size: 24rpx;
				color: #FDB42E;
				margin-right: 5rpx;
				line-height: 32rpx;
			}

			.yb {
				font-size: 36rpx;
				color: #FDB42E;
				line-height: 32rpx;
				white-space: nowrap;
				line-height: 32rpx;
			}

			.font24 {
				font-size: 24rpx;
			}

			.col-orange {
				color: #FDB42E;
			}

			.end {
				font-size: 30rpx;
				color: #FDB42E;
				white-space: nowrap;
			}
		}
	}

	.listwrap:last-of-type {
		.bor {
			border: none !important;
		}
	}

	.one {
		border-radius: 25rpx;
		background-color: $bg-color-white;
		box-shadow: 0px 5rpx 5rpx 0px rgba(204, 204, 204, 0.5);
		width: 730rpx;
		box-sizing: border-box;
		margin: 0 10rpx 15rpx;
		overflow: hidden;
	}

	.two {
		width: 100%;
		background-color: $bg-color-white;
		// width:730rpx;
		box-sizing: border-box;
		// margin:0 10rpx;
		overflow: hidden;
		padding: 0 30rpx;
	}
</style>
